<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>安全功能测试页面</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .test-section {
            background: white;
            margin: 20px 0;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        h1, h2 {
            color: #333;
        }
        .test-item {
            margin: 15px 0;
            padding: 15px;
            background: #f9f9f9;
            border-left: 4px solid #4CAF50;
        }
        button {
            background: #4CAF50;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            margin: 5px;
        }
        button:hover {
            background: #45a049;
        }
        input, textarea {
            width: 100%;
            padding: 8px;
            margin: 5px 0;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box;
        }
        .result {
            margin-top: 10px;
            padding: 10px;
            border-radius: 4px;
            white-space: pre-wrap;
            font-family: monospace;
            font-size: 12px;
        }
        .success {
            background: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }
        .error {
            background: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }
        .info {
            background: #d1ecf1;
            color: #0c5460;
            border: 1px solid #bee5eb;
        }
    </style>
</head>
<body>
    <h1>🔒 Web安全功能测试页面</h1>
    
    <div class="test-section">
        <h2>1. 前端验证测试</h2>
        
        <div class="test-item">
            <h3>用户名验证</h3>
            <input type="text" id="username" placeholder="输入用户名测试">
            <button onclick="testUsername()">测试用户名</button>
            <div id="usernameResult" class="result"></div>
        </div>
        
        <div class="test-item">
            <h3>密码验证</h3>
            <input type="password" id="password" placeholder="输入密码测试">
            <button onclick="testPassword()">测试密码</button>
            <div id="passwordResult" class="result"></div>
        </div>
        
        <div class="test-item">
            <h3>邮箱验证</h3>
            <input type="email" id="email" placeholder="输入邮箱测试">
            <button onclick="testEmail()">测试邮箱</button>
            <div id="emailResult" class="result"></div>
        </div>
    </div>
    
    <div class="test-section">
        <h2>2. XSS防护测试</h2>
        <div class="test-item">
            <h3>发送包含XSS代码的请求</h3>
            <textarea id="xssPayload" rows="3" placeholder="输入XSS代码，如: &lt;script&gt;alert(1)&lt;/script&gt;">&lt;script&gt;alert('XSS')&lt;/script&gt;</textarea>
            <button onclick="testXSS()">测试XSS防护</button>
            <div id="xssResult" class="result"></div>
        </div>
    </div>
    
    <div class="test-section">
        <h2>3. CSRF防护测试</h2>
        <div class="test-item">
            <h3>获取CSRF Token</h3>
            <button onclick="getCSRFToken()">获取Token</button>
            <div id="csrfTokenResult" class="result"></div>
        </div>
        
        <div class="test-item">
            <h3>测试CSRF验证</h3>
            <button onclick="testCSRF()">不带Token请求（应该失败）</button>
            <button onclick="testCSRFWithToken()">带Token请求（应该成功）</button>
            <div id="csrfResult" class="result"></div>
        </div>
    </div>
    
    <div class="test-section">
        <h2>4. 限流测试（DoS防护）</h2>
        <div class="test-item">
            <h3>快速发送请求测试限流</h3>
            <button onclick="testRateLimit()">发送20个请求</button>
            <div id="rateLimitResult" class="result"></div>
        </div>
    </div>
    
    <div class="test-section">
        <h2>5. 文件上传安全测试</h2>
        <div class="test-item">
            <h3>上传文件</h3>
            <input type="file" id="fileInput">
            <button onclick="testFileUpload()">上传文件</button>
            <div id="fileUploadResult" class="result"></div>
        </div>
    </div>
    
    <div class="test-section">
        <h2>6. 数据加密测试</h2>
        <div class="test-item">
            <h3>加密敏感数据</h3>
            <input type="text" id="encryptInput" placeholder="输入要加密的数据（如手机号、邮箱等）" value="13800138000">
            <button onclick="testEncryption()">测试加密</button>
            <div id="encryptionResult" class="result"></div>
        </div>
        
        <div class="test-item">
            <h3>解密数据</h3>
            <input type="text" id="decryptInput" placeholder="输入加密后的数据">
            <button onclick="testDecryption()">测试解密</button>
            <div id="decryptionResult" class="result"></div>
        </div>
        
        <div class="test-item">
            <h3>加密/解密演示</h3>
            <input type="text" id="demoInput" placeholder="输入数据查看完整加密解密过程" value="test@example.com">
            <button onclick="testEncryptionDemo()">完整演示</button>
            <div id="demoResult" class="result"></div>
        </div>
    </div>
    
    <div class="test-section">
        <h2>7. 防抖测试</h2>
        <div class="test-item">
            <h3>输入框防抖（打开控制台查看）</h3>
            <input type="text" id="debounceInput" placeholder="快速输入，观察控制台">
            <div id="debounceResult" class="result"></div>
        </div>
    </div>

    <script>
        const API_BASE = 'http://localhost:8080';
        let csrfToken = '';
        
        // 检查后端连接
        async function checkBackendConnection() {
            try {
                const response = await fetch(`${API_BASE}/health`, {
                    method: 'GET',
                    mode: 'cors'
                });
                if (response.ok) {
                    console.log('✅ 后端连接正常');
                    return true;
                }
            } catch (error) {
                console.error('❌ 后端连接失败:', error);
                alert('无法连接到后端服务器！\n\n请检查：\n1. 后端服务是否已启动（http://localhost:8080）\n2. 是否使用 http:// 协议访问此页面（不要直接用 file://）\n3. 浏览器控制台是否有CORS错误');
                return false;
            }
            return false;
        }
        
        // 页面加载时检查连接
        window.addEventListener('load', async () => {
            const connected = await checkBackendConnection();
            if (!connected) {
                document.body.insertAdjacentHTML('afterbegin', 
                    '<div style="background: #f8d7da; color: #721c24; padding: 20px; margin: 20px; border-radius: 8px; border: 1px solid #f5c6cb;">' +
                    '<h3>⚠️ 无法连接到后端服务器</h3>' +
                    '<p><strong>请按以下步骤操作：</strong></p>' +
                    '<ol>' +
                    '<li>确保后端服务已启动（运行 ChildEnglishApplication.java 或 mvn spring-boot:run）</li>' +
                    '<li>使用HTTP服务器访问此页面，不要直接用 file:// 打开</li>' +
                    '<li>可以使用以下命令启动本地服务器：<br>' +
                    '<code style="background: #f0f0f0; padding: 5px;">python -m http.server 8000</code><br>' +
                    '然后访问 <code>http://localhost:8000/test-security.html</code></li>' +
                    '<li>或者将文件放在前端项目的 public 目录，通过前端开发服务器访问</li>' +
                    '</ol>' +
                    '<p>后端地址：<code>http://localhost:8080</code></p>' +
                    '</div>'
                );
            }
        });
        
        // 加载验证函数（需要从实际项目中导入）
        // 这里使用内联实现用于演示
        function validateUsername(username) {
            if (!username) return { valid: false, message: '用户名不能为空' };
            if (username.length < 3 || username.length > 20) {
                return { valid: false, message: '用户名长度必须在3-20个字符之间' };
            }
            if (!/^[a-zA-Z0-9_]+$/.test(username)) {
                return { valid: false, message: '用户名只能包含字母、数字和下划线' };
            }
            return { valid: true, message: '' };
        }
        
        function validatePassword(password) {
            if (!password) return { valid: false, message: '密码不能为空' };
            if (password.length < 8 || password.length > 32) {
                return { valid: false, message: '密码长度必须在8-32个字符之间' };
            }
            return { valid: true, message: '' };
        }
        
        function validateEmail(email) {
            if (!email) return { valid: false, message: '邮箱不能为空' };
            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            if (!emailRegex.test(email)) {
                return { valid: false, message: '邮箱格式不正确' };
            }
            return { valid: true, message: '' };
        }
        
        function showResult(elementId, message, type = 'info') {
            const element = document.getElementById(elementId);
            element.textContent = message;
            element.className = `result ${type}`;
        }
        
        function testUsername() {
            const username = document.getElementById('username').value;
            const result = validateUsername(username);
            showResult('usernameResult', 
                result.valid ? '✅ 验证通过' : '❌ ' + result.message,
                result.valid ? 'success' : 'error'
            );
        }
        
        function testPassword() {
            const password = document.getElementById('password').value;
            const result = validatePassword(password);
            showResult('passwordResult',
                result.valid ? '✅ 验证通过' : '❌ ' + result.message,
                result.valid ? 'success' : 'error'
            );
        }
        
        function testEmail() {
            const email = document.getElementById('email').value;
            const result = validateEmail(email);
            showResult('emailResult',
                result.valid ? '✅ 验证通过' : '❌ ' + result.message,
                result.valid ? 'success' : 'error'
            );
        }
        
        async function testXSS() {
            const payload = document.getElementById('xssPayload').value;
            
            if (!payload || payload.trim() === '') {
                showResult('xssResult', '请输入XSS测试代码', 'error');
                return;
            }
            
            // 检查是否有CSRF Token
            if (!csrfToken) {
                showResult('xssResult', 
                    '⚠️ 未获取CSRF Token\n\n' +
                    'XSS测试需要CSRF Token。请先点击"获取Token"按钮获取Token，然后再测试。', 
                    'error'
                );
                return;
            }
            
            showResult('xssResult', `正在测试XSS防护...\n\n测试代码: ${payload}`, 'info');
            
            try {
                const response = await fetch(`${API_BASE}/api/register`, {
                    method: 'POST',
                    mode: 'cors',
                    credentials: 'include',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': csrfToken
                    },
                    body: JSON.stringify({
                        username: payload,
                        password: '12345678',
                        email: 'test@test.com'
                    })
                });
                
                if (!response.ok) {
                    // 尝试解析错误响应
                    let errorData;
                    try {
                        errorData = await response.json();
                    } catch (e) {
                        errorData = { message: `HTTP ${response.status}: ${response.statusText}` };
                    }
                    
                    if (response.status === 403) {
                        showResult('xssResult', 
                            `❌ CSRF验证失败\n\n` +
                            `状态码: ${response.status}\n` +
                            `响应: ${JSON.stringify(errorData, null, 2)}\n\n` +
                            `说明: 请确保已获取CSRF Token`, 
                            'error'
                        );
                    } else {
                        showResult('xssResult', 
                            `响应状态: ${response.status}\n\n` +
                            `响应: ${JSON.stringify(errorData, null, 2)}\n\n` +
                            `说明: 如果XSS代码被过滤或拒绝，说明防护生效`, 
                            'info'
                        );
                    }
                    return;
                }
                
                const data = await response.json();
                
                // 检查响应中是否包含原始XSS代码
                const responseStr = JSON.stringify(data, null, 2);
                const xssDetected = responseStr.includes('<script') || 
                                   responseStr.includes('javascript:') || 
                                   responseStr.includes('onerror=');
                
                if (xssDetected) {
                    showResult('xssResult',
                        `⚠️ 检测到XSS代码可能未被完全过滤\n\n` +
                        `原始输入: ${payload}\n\n` +
                        `响应: ${responseStr}\n\n` +
                        `说明: 响应中仍包含XSS相关代码，请检查后端XSS过滤器`, 
                        'error'
                    );
                } else {
                    showResult('xssResult',
                        `✅ XSS防护测试完成\n\n` +
                        `原始输入: ${payload}\n\n` +
                        `响应: ${responseStr}\n\n` +
                        `说明: XSS代码已被过滤或转义，防护生效！`, 
                        'success'
                    );
                }
            } catch (error) {
                console.error('XSS测试错误:', error);
                showResult('xssResult', 
                    `❌ XSS测试失败: ${error.message}\n\n` +
                    `可能的原因：\n` +
                    `1. 后端服务未启动（访问 http://localhost:8080/health 检查）\n` +
                    `2. CORS配置问题\n` +
                    `3. 网络连接问题\n` +
                    `4. 未获取CSRF Token\n\n` +
                    `请检查：\n` +
                    `1. 浏览器控制台（F12 -> Console）查看详细错误\n` +
                    `2. Network标签页查看请求详情\n` +
                    `3. 确认后端服务是否正常运行\n` +
                    `4. 确认已获取CSRF Token`, 
                    'error'
                );
            }
        }
        
        async function getCSRFToken() {
            showResult('csrfTokenResult', '正在获取CSRF Token...', 'info');
            
            // 尝试多个端点
            const endpoints = [
                `${API_BASE}/api/csrf-token`,
                `${API_BASE}/csrf-token`
            ];
            
            for (const endpoint of endpoints) {
                try {
                    console.log('尝试获取Token，端点:', endpoint);
                    const response = await fetch(endpoint, {
                        method: 'GET',
                        mode: 'cors',
                        credentials: 'include'
                    });
                    
                    console.log('响应状态:', response.status, response.statusText);
                    console.log('响应头:', [...response.headers.entries()]);
                    
                    if (!response.ok) {
                        console.warn(`端点 ${endpoint} 返回错误: ${response.status}`);
                        continue; // 尝试下一个端点
                    }
                    
                    const token = response.headers.get('X-CSRF-TOKEN');
                    console.log('获取到的Token:', token);
                    
                    if (token) {
                        csrfToken = token;
                        showResult('csrfTokenResult', 
                            `✅ Token获取成功！\n\n` +
                            `端点: ${endpoint}\n` +
                            `Token: ${token}\n\n` +
                            `说明: Token已保存，可以在后续请求中使用`, 
                            'success'
                        );
                        return; // 成功，退出
                    } else {
                        // 尝试从响应中获取信息
                        const data = await response.json();
                        console.log('响应数据:', data);
                        showResult('csrfTokenResult', 
                            `⚠️ 响应头中未找到Token\n\n` +
                            `端点: ${endpoint}\n` +
                            `响应: ${JSON.stringify(data, null, 2)}\n\n` +
                            `请检查：\n1. 打开浏览器开发者工具（F12）\n2. 查看Network标签页\n3. 找到该请求，查看Response Headers中是否有X-CSRF-TOKEN\n4. 确认后端CSRFFilter是否正常工作`, 
                            'error'
                        );
                        return; // 至少得到了响应，停止尝试
                    }
                } catch (error) {
                    console.error(`端点 ${endpoint} 请求失败:`, error);
                    // 继续尝试下一个端点
                }
            }
            
            // 所有端点都失败了
            showResult('csrfTokenResult', 
                `❌ 所有端点都无法获取Token\n\n` +
                `已尝试的端点：\n${endpoints.map(e => `- ${e}`).join('\n')}\n\n` +
                `可能的原因：\n1. 后端服务未启动（访问 http://localhost:8080/health 检查）\n2. CORS配置问题\n3. 网络连接问题\n4. 浏览器缓存问题（尝试硬刷新 Ctrl+F5）\n\n` +
                `请检查：\n1. 浏览器控制台（F12 -> Console）查看详细错误\n2. Network标签页查看请求详情\n3. 确认后端服务是否正常运行`, 
                'error'
            );
        }
        
        async function testCSRF() {
            showResult('csrfResult', '正在测试不带Token的请求（应该被CSRF防护拦截）...', 'info');
            
            try {
                const response = await fetch(`${API_BASE}/api/register`, {
                    method: 'POST',
                    mode: 'cors',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    credentials: 'include',
                    body: JSON.stringify({
                        username: 'testuser' + Date.now(),
                        password: '12345678',
                        email: 'test@test.com'
                    })
                });
                
                const data = await response.json();
                if (response.status === 403) {
                    showResult('csrfResult', 
                        '✅ CSRF防护生效！\n\n' +
                        `状态码: ${response.status}\n` +
                        `响应: ${JSON.stringify(data, null, 2)}\n\n` +
                        `说明: 不带Token的请求被正确拦截，CSRF防护正常工作！`, 
                        'success'
                    );
                } else {
                    showResult('csrfResult', 
                        `⚠️ 未触发CSRF防护\n\n` +
                        `状态码: ${response.status}\n` +
                        `响应: ${JSON.stringify(data, null, 2)}\n\n` +
                        `说明: 请求通过了CSRF验证，这可能是因为：\n` +
                        `1. /api/register 在CSRF排除列表中\n` +
                        `2. 或者有其他配置问题\n\n` +
                        `请检查后端CSRFFilter配置`, 
                        'error'
                    );
                }
            } catch (error) {
                showResult('csrfResult', 
                    `❌ 请求失败: ${error.message}\n\n` +
                    `请检查：\n1. 后端服务是否正常运行\n2. 网络连接是否正常\n3. 浏览器控制台是否有详细错误`, 
                    'error'
                );
            }
        }
        
        async function testCSRFWithToken() {
            if (!csrfToken) {
                showResult('csrfResult', '请先获取CSRF Token', 'error');
                return;
            }
            
            showResult('csrfResult', '正在测试带Token的请求...', 'info');
            
            try {
                const response = await fetch(`${API_BASE}/api/register`, {
                    method: 'POST',
                    mode: 'cors',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': csrfToken
                    },
                    credentials: 'include',
                    body: JSON.stringify({
                        username: 'testuser' + Date.now(),
                        password: '12345678',
                        email: 'test@test.com'
                    })
                });
                
                const data = await response.json();
                if (response.status === 200 || response.status === 201) {
                    showResult('csrfResult', '✅ 带Token请求成功: ' + JSON.stringify(data, null, 2), 'success');
                } else {
                    showResult('csrfResult', '响应: ' + JSON.stringify(data, null, 2), 'info');
                }
            } catch (error) {
                showResult('csrfResult', '错误: ' + error.message, 'error');
            }
        }
        
        async function testRateLimit() {
            showResult('rateLimitResult', '正在发送20个请求测试限流...', 'info');
            let successCount = 0;
            let rateLimitCount = 0;
            let errorCount = 0;
            
            for (let i = 1; i <= 20; i++) {
                try {
                    const response = await fetch(`${API_BASE}/health`, {
                        method: 'GET',
                        mode: 'cors'
                    });
                    
                    if (response.status === 200) {
                        successCount++;
                    } else if (response.status === 429) {
                        rateLimitCount++;
                    }
                } catch (error) {
                    errorCount++;
                }
                
                // 快速发送，触发限流
                await new Promise(resolve => setTimeout(resolve, 50));
            }
            
            showResult('rateLimitResult',
                `测试完成:\n` +
                `✅ 成功: ${successCount}\n` +
                `⛔ 限流(429): ${rateLimitCount}\n` +
                `❌ 错误: ${errorCount}\n\n` +
                `说明: 如果看到429响应，说明限流功能生效`,
                rateLimitCount > 0 ? 'success' : 'info'
            );
        }
        
        async function testFileUpload() {
            const fileInput = document.getElementById('fileInput');
            const file = fileInput.files[0];
            
            if (!file) {
                showResult('fileUploadResult', '请先选择文件', 'error');
                return;
            }
            
            // 检查是否有CSRF Token
            if (!csrfToken) {
                showResult('fileUploadResult', 
                    '⚠️ 未获取CSRF Token\n\n' +
                    '文件上传需要CSRF Token。请先点击"获取Token"按钮获取Token，然后再上传文件。', 
                    'error'
                );
                return;
            }
            
            showResult('fileUploadResult', `正在上传文件: ${file.name} (${file.type}, ${(file.size / 1024).toFixed(2)}KB)...`, 'info');
            
            const formData = new FormData();
            formData.append('file', file);
            // 文件上传时，CSRF Token可以通过Header或FormData传递
            // 由于FormData会自动设置Content-Type，我们通过Header传递Token
            
            try {
                const response = await fetch(`${API_BASE}/file/upload`, {
                    method: 'POST',
                    mode: 'cors',
                    credentials: 'include',
                    headers: {
                        // 不要设置Content-Type，让浏览器自动设置multipart/form-data的boundary
                        'X-CSRF-TOKEN': csrfToken
                    },
                    body: formData
                });
                
                if (!response.ok) {
                    // 尝试解析错误响应
                    let errorData;
                    try {
                        errorData = await response.json();
                    } catch (e) {
                        errorData = { message: `HTTP ${response.status}: ${response.statusText}` };
                    }
                    
                    if (response.status === 403) {
                        showResult('fileUploadResult', 
                            `❌ CSRF验证失败\n\n` +
                            `状态码: ${response.status}\n` +
                            `响应: ${JSON.stringify(errorData, null, 2)}\n\n` +
                            `说明: 请确保已获取CSRF Token`, 
                            'error'
                        );
                    } else {
                        showResult('fileUploadResult', 
                            `❌ 文件上传失败\n\n` +
                            `状态码: ${response.status}\n` +
                            `响应: ${JSON.stringify(errorData, null, 2)}`, 
                            'error'
                        );
                    }
                    return;
                }
                
                const data = await response.json();
                showResult('fileUploadResult', 
                    `✅ 文件上传成功！\n\n` +
                    `文件名: ${data.data?.fileName || data.fileName || 'N/A'}\n` +
                    `原始名: ${data.data?.originalName || data.originalName || file.name}\n` +
                    `大小: ${((data.data?.size || data.size || file.size) / 1024).toFixed(2)}KB\n` +
                    `类型: ${data.data?.contentType || data.contentType || file.type}\n\n` +
                    `完整响应: ${JSON.stringify(data, null, 2)}`, 
                    'success'
                );
            } catch (error) {
                console.error('文件上传错误:', error);
                showResult('fileUploadResult', 
                    `❌ 文件上传失败: ${error.message}\n\n` +
                    `可能的原因：\n` +
                    `1. 后端服务未启动（访问 http://localhost:8080/health 检查）\n` +
                    `2. CORS配置问题\n` +
                    `3. 网络连接问题\n` +
                    `4. 文件大小超过限制\n` +
                    `5. 文件类型不被允许\n\n` +
                    `请检查：\n` +
                    `1. 浏览器控制台（F12 -> Console）查看详细错误\n` +
                    `2. Network标签页查看请求详情\n` +
                    `3. 确认后端服务是否正常运行`, 
                    'error'
                );
            }
        }
        
        // 数据加密测试
        async function testEncryption() {
            const data = document.getElementById('encryptInput').value;
            
            if (!data || data.trim() === '') {
                showResult('encryptionResult', '请输入要加密的数据', 'error');
                return;
            }
            
            // 检查是否有CSRF Token
            if (!csrfToken) {
                showResult('encryptionResult', 
                    '⚠️ 未获取CSRF Token\n\n请先点击"获取Token"按钮获取Token', 
                    'error'
                );
                return;
            }
            
            showResult('encryptionResult', `正在加密数据: ${data}...`, 'info');
            
            try {
                const response = await fetch(`${API_BASE}/api/encryption/encrypt`, {
                    method: 'POST',
                    mode: 'cors',
                    credentials: 'include',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': csrfToken
                    },
                    body: JSON.stringify({ data: data })
                });
                
                if (!response.ok) {
                    const errorData = await response.json();
                    showResult('encryptionResult', `❌ 加密失败: ${JSON.stringify(errorData, null, 2)}`, 'error');
                    return;
                }
                
                const result = await response.json();
                const dataObj = result.data || {};
                
                showResult('encryptionResult',
                    `✅ 数据加密成功！\n\n` +
                    `原始数据: ${dataObj.original}\n` +
                    `加密后: ${dataObj.encrypted}\n` +
                    `算法: ${dataObj.algorithm}\n\n` +
                    `说明: 加密后的数据可以安全存储或传输，即使被截获也无法直接读取。`,
                    'success'
                );
            } catch (error) {
                showResult('encryptionResult', `❌ 加密失败: ${error.message}`, 'error');
            }
        }
        
        async function testDecryption() {
            const encryptedData = document.getElementById('decryptInput').value;
            
            if (!encryptedData || encryptedData.trim() === '') {
                showResult('decryptionResult', '请输入要解密的数据', 'error');
                return;
            }
            
            // 检查是否有CSRF Token
            if (!csrfToken) {
                showResult('decryptionResult', 
                    '⚠️ 未获取CSRF Token\n\n请先点击"获取Token"按钮获取Token', 
                    'error'
                );
                return;
            }
            
            showResult('decryptionResult', `正在解密数据...`, 'info');
            
            try {
                const response = await fetch(`${API_BASE}/api/encryption/decrypt`, {
                    method: 'POST',
                    mode: 'cors',
                    credentials: 'include',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': csrfToken
                    },
                    body: JSON.stringify({ encryptedData: encryptedData })
                });
                
                if (!response.ok) {
                    const errorData = await response.json();
                    showResult('decryptionResult', `❌ 解密失败: ${JSON.stringify(errorData, null, 2)}`, 'error');
                    return;
                }
                
                const result = await response.json();
                const dataObj = result.data || {};
                
                showResult('decryptionResult',
                    `✅ 数据解密成功！\n\n` +
                    `加密数据: ${dataObj.encrypted}\n` +
                    `解密后: ${dataObj.decrypted}\n` +
                    `算法: ${dataObj.algorithm}\n\n` +
                    `说明: 使用相同的密钥可以正确还原原始数据。`,
                    'success'
                );
            } catch (error) {
                showResult('decryptionResult', `❌ 解密失败: ${error.message}`, 'error');
            }
        }
        
        async function testEncryptionDemo() {
            const data = document.getElementById('demoInput').value;
            
            if (!data || data.trim() === '') {
                showResult('demoResult', '请输入要演示的数据', 'error');
                return;
            }
            
            // 检查是否有CSRF Token
            if (!csrfToken) {
                showResult('demoResult', 
                    '⚠️ 未获取CSRF Token\n\n请先点击"获取Token"按钮获取Token', 
                    'error'
                );
                return;
            }
            
            showResult('demoResult', `正在演示加密/解密过程: ${data}...`, 'info');
            
            try {
                const response = await fetch(`${API_BASE}/api/encryption/demo`, {
                    method: 'POST',
                    mode: 'cors',
                    credentials: 'include',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': csrfToken
                    },
                    body: JSON.stringify({ data: data })
                });
                
                if (!response.ok) {
                    const errorData = await response.json();
                    showResult('demoResult', `❌ 演示失败: ${JSON.stringify(errorData, null, 2)}`, 'error');
                    return;
                }
                
                const result = await response.json();
                const dataObj = result.data || {};
                
                showResult('demoResult',
                    `✅ 加密/解密演示完成！\n\n` +
                    `原始数据: ${dataObj.original}\n` +
                    `↓ 加密 ↓\n` +
                    `加密后: ${dataObj.encrypted}\n` +
                    `↓ 解密 ↓\n` +
                    `解密后: ${dataObj.decrypted}\n\n` +
                    `加密算法: ${dataObj.encryptionAlgorithm}\n` +
                    `加密模式: ${dataObj.encryptionMode}\n` +
                    `填充方式: ${dataObj.padding}\n` +
                    `密钥长度: ${dataObj.keyLength}\n` +
                    `数据匹配: ${dataObj.isMatch ? '✅ 是' : '❌ 否'}\n\n` +
                    `说明: ${dataObj.note}`,
                    dataObj.isMatch ? 'success' : 'error'
                );
            } catch (error) {
                showResult('demoResult', `❌ 演示失败: ${error.message}`, 'error');
            }
        }
        
        // 防抖测试
        let debounceTimer;
        document.getElementById('debounceInput').addEventListener('input', function() {
            clearTimeout(debounceTimer);
            console.log('输入事件触发:', this.value);
            
            debounceTimer = setTimeout(() => {
                console.log('防抖执行，最终值:', this.value);
                showResult('debounceResult', `防抖执行，最终值: ${this.value}\n（查看控制台查看所有输入事件）`, 'info');
            }, 300);
        });
    </script>
</body>
</html>

